var UI = UI||{};

UI = {
	baseReg:/\{[^\)]+?\}/g,
	
	comm:{progress:"<div class='progress'><div class='progress-bar' style='width: 0%'></div>" +
			"</div><span class='progress-description'></span>",
			loading:"<div class='overlay'><i class='fa fa-refresh fa-spin'></i></div>"},
	replace:function(str,opts){
		
		return str.replace(UI.baseReg,function(w){
			if(w.indexOf('{')==0&&w.indexOf('}')==w.length-1){
				w= w.substring(1,w.length-1);
				if(opts[w]){
					if(UI.comm[w]){
						return UI.comm[w];
					}
					return opts[w];
				}else{
					return '';
				}
			}
			return w;
		});
	},
	layout:function(){
		return {
			nav:function(opts){
				
			},
			bottom:function(){
				
			},
			
		}();	
	},
	widget:function(){
		return {
			infobox:function(_opts){
				var o={title:'',progress:false,content:'',icon:'fa fa-envelope-o'
					,info:'',color:'bg-aqua',iconclass:''};
				$.extend(o,_opts);
				var infoBox = "<div class='info-box {color}'>" +
						"<span class='info-box-icon {iconclass}'>" +
						"<i class='{icon}'></i></span>" +
				  "<div class='info-box-content'><span class='info-box-text'>" +
				  "{title}</span><span class='info-box-number'>{content}</span>{progress}" +
				  "</div></div>";
				return UI.replace(infoBox,o);
			},
			smallbox:function(opts){
				var  o={info:'暂无',content:'暂无',link:'请点击',href:'javascript:void(0);',icon:'ion-stats-bars',color:'bg-aqua'};
				$.extend(o,opts);
				var smallbox = "<div class='small-box {color}'>" +
						"<div class='inner'><h3>{content}</h3>" +
						"<p>{info}</p></div>" +
						"<div class='icon'>" +
						"<i class='{icon}'></i></div>" +
						"<a href='{href}' class='small-box-footer'>" +
						"<i class='fa fa-arrow-circle-right'></i>{link}</a></div>";
				
				return UI.replace(smallbox,o);
				
			},
			expandbox:function(opts){
				var  o={title:'',loading:false,content:'',color:'collapsed-box'};
				$.extend(o,opts);
				var box = "<div class='box box-default {color}'>" +
						"<div class='box-header with-border'>" +
						"<h3 class='box-title'>{title}</h3>" +
						"<div class='box-tools pull-right'>" +
						"<button type='button' class='btn btn-box-tool' data-widget='collapse'>" +
						"<i class='fa fa-plus'></i></button></div></div>" +
						"<div class='box-body'>{content}</div>{loading}</div>";
				return UI.replace(box,o);
			},
			removeBox:function(opts){
				var  o={title:'',loading:false,content:'',info:'',color:'box-solid'};
				$.extend(o,opts);
				var box = "<div class='box {color}'><div class='box-header with-border'>" +
						"<h3 class='box-title'>{title}</h3>" +
						"<div class='box-tools pull-right'><button type='button' " +
						"class='btn btn-box-tool' data-widget='remove'><i class='fa fa-times'></i></button>" +
						"</div></div><div class='box-body'>{content}</div>{loading}</div>";
				return UI.replace(box,o);
			},
			textbox:function(opts){
				var  o={holder:'请输入'};
				$.extend(o,opts);
				var input = "<input type='text' class='form-control input-sm' placeholder='{holder}'>";
			}
			
		};
	}(),
	message:function(){
		return {
			button:function(opts){
				var  o={color:'',icon:'',title:''};
				$.extend(o,opts);
				var btn = "<button type='button' class='btn btn-default btn-xs {color}'><i class='{icon}'></i>{title}</button>";
				return UI.replace(btn,o);
			}
			
		}();	
	},
};


